<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="openlayers/ol.css">
    <style>
        #marker {
            width: 5px;
            height: 5px;
            border: 1px solid #088;
            border-radius: 10px;
            background-color: #0FF;
            opacity: 0.5;
        }
    </style>
</head>
<body>
<div id="map"></div>
<div id="marker" title="Marker"></div>
<script src="openlayers/ol.js"></script>
<script>
    var leftPad = function (str, size, padStr, prefix) {
        var result = str;
        var len = result.length;
        while (len < size) {
            result = padStr + result;
            len++;
        }
        return prefix + result;
    };
    var layer = new ol.layer.Tile({
        source: new ol.source.XYZ({
            tileUrlFunction: function (tileCoord) {
                var a = tileCoord[0];
                var b = tileCoord[1];
                var c = -tileCoord[2] - 1;
                var newA = leftPad(a.toString(), 2, '0', 'L');
                var newB = leftPad(b.toString(16), 8, '0', 'C');
                var newC = leftPad(c.toString(16), 8, '0', 'R');
                return 'http://localhost:9090/map/' + newA + '/' + newC + '/' + newB + '.png';
            },
            minxZoom: 3,
            maxZoom: 16,
            projection: 'EPSG:3857'
        })
    });
    var view = new ol.View({
        center: ol.proj.fromLonLat([118.048798, 36.825649]),
        zoom: 4,
        minZoom: 3,
        maxZoom: 16
    });
    var map = new ol.Map({
        target: 'map',
        layers: [
            layer
        ],
        view: view
    });
    view.animate({
        duration: 2000,
        zoom: 14
    });

    map.on('click', function (evt) {
        console.log(ol.proj.toLonLat(evt.coordinate))
    });

    // lon经度 lat纬度
    // var marker = new ol.Overlay({
    //     position: ol.proj.fromLonLat([118.0415296555, 36.8222328421]),
    //     positioning: 'center-center',
    //     element: document.getElementById('marker'),
    //     stopEvent: false,
    //     autoPan: true
    // });
    // map.addOverlay(marker);
    var feature = new ol.Feature({
        geometry: new ol.geom.Point(ol.proj.fromLonLat([118.0415296555, 36.8222328421]))
        // geometry: new ol.geom.LineString([
        //         ol.proj.fromLonLat([118.0415296555, 36.8222328421]),
        //         ol.proj.fromLonLat([118.0379033089, 36.8215844135]),
        //         ol.proj.fromLonLat([118.0370020866, 36.8194887923]),
        //         ol.proj.fromLonLat([118.0371952057, 36.8139918083]),
        //         ol.proj.fromLonLat([118.0370664597, 36.8076697887]),
        //     ]
        // )

    });

    feature.setStyle(new ol.style.Style({
            image: new ol.style.Icon({
                color: '#4271AE',
                anchor:[0.5,1],
                scale:0.5,
                src: 'openlayers/images/mark_bs.png'
            })
            // stroke: new ol.style.Stroke({
            //     width: 2,
            //     color: [0, 0, 0, 1]
            // })
        })
    );

    // 实例化一个矢量图层
    var source = new ol.source.Vector({
        features: [feature]
    });


    var pointOrLine = new ol.layer.Vector({
        source: source
    });


    map.addLayer(pointOrLine)

</script>
</body>
</html>